<template>
  <el-dialog
    title="编辑监护仪信息"
    :visible.sync="dialogVisible"
    :showClose="false"
    :before-close="cancelDialog"
    :close-on-click-modal="false"
    width="30%"
  >
    <el-form class="form" label-width="86px">
      <el-form-item label="名称:" label-width="91px">
        <el-input v-model="dialogInfo.monitorName" class="bianji" />
      </el-form-item>
      <el-form-item label="编号:" label-width="91px">
        <el-input v-model="dialogInfo.monitorCode" class="bianji" />
      </el-form-item>
      <el-form-item label="IP : ">
        <el-input v-model="dialogInfo.monitorIp" class="bianji" />
      </el-form-item>
      <el-form-item label="端口 : ">
        <el-input v-model="dialogInfo.monitorPort" class="bianji" />
      </el-form-item>
      <el-form-item label="厂家名称 : ">
        <el-input v-model="dialogInfo.manufacturersName" class="bianji" />
      </el-form-item>
      <el-form-item label="厂家型号 : ">
        <el-input v-model="dialogInfo.monitorSeriesNumber" class="bianji" />
      </el-form-item>
      <el-form-item label="采购日期 : ">
        <el-date-picker
          v-model="dialogInfo.procurementDate"
          type="date"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>

      <el-form-item label="服务方式: ">
        <el-select
            v-model="dialogInfo.deviceRole"
            placeholder="请选择服务方式"
            clearable
            class="bianji"
        >
          <el-option
              v-for="item in options1"
              :key="item.id"
              :label="item.value"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="连接方式: ">
        <el-select
            v-model="dialogInfo.connectType"
            placeholder="请选择连接方式"
            clearable
            class="bianji"
        >
          <el-option
              v-for="item in options2"
              :key="item.id"
              :label="item.value"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="是否中央站">
        <el-select
            v-model="dialogInfo.typeCode"
            placeholder="请选择"
            clearable
            class="bianji"
        >
          <el-option
              v-for="item in options3"
              :key="item.id"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="状态 : ">
        <el-switch
          v-model="dialogInfo.status"
          class="switch-btn"
          inactive-text="禁用"
          active-text="启用"
          :active-value="1"
          :inactive-value="2"
          active-color="#02538C"
          inactive-color="#B9B9B9"
        />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancelDialog">取 消</el-button>
      <el-button type="primary" @click="saveDialog">保 存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  deparqueryList,
  monitorDictionaryEdit,
  monitorDictionaryQueryList,
  MonitorManufacturersDictionarygetList,
} from "@/api/table";

export default {
  name: "Lisecome",
  components: {},
  // 父组件 传 过来的 值
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    dialogInfo: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      aaa: [],
      typeCode:"",
      options1: [
        {
          id: "0",
          value: "客户端",
          label: "客户端",
        },
        {
          id: "1",
          value: "服务端",
          label: "服务端",
        },
      ],
      options2: [
        {
          id: "0",
          value: "直连",
          label: "直连",
        },
        {
          id: "1",
          value: "非直连",
          label: "非直连",
        },
      ],
      options3: [
        {
          id: "0",
          value: 1,
          label: "否",
        },
        {
          id: "1",
          value: 2,
          label: "是",
        },
      ],
    };
  },
  watch: {
    // 监听 弹窗显示， 可以用来写 请求接口
    dialogVisible: function (newVal, oldVal) {
      if (newVal) {
      }
    },
  },
  mounted() {
    monitorDictionaryQueryList().then((res) => {
      this.aaa = res.data;
    });
    this.typeCode=this.dialogInfo.typeCode;
  },
  methods: {
    cancelDialog() {
      this.$emit("update:dialogVisible", false);
    },
    // 修改父组件传过来的值
    saveDialog() {
      monitorDictionaryEdit({
        id: this.dialogInfo.id,
        status: this.dialogInfo.status,
        monitorName: this.dialogInfo.monitorName,
        monitorCode: this.dialogInfo.monitorCode,
        monitorType: this.dialogInfo.monitorType,
        monitorIp: this.dialogInfo.monitorIp,
        monitorPort: this.dialogInfo.monitorPort,
        manufacturersName: this.dialogInfo.manufacturersName,
        monitorSeriesNumber: this.dialogInfo.monitorSeriesNumber,
        procurementDate: this.dialogInfo.procurementDate,
        connectType:this.dialogInfo.connectType,
        deviceRole:this.dialogInfo.deviceRole,
        typeCode:this.dialogInfo.typeCode
      }).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: "保存成功",
            type: "success",
          });
          this.$emit("update:dialogVisible", false);
        }else{
          this.$message({
            message: "保存失败",
            type: "warning",
          });
        }
      });
    },
  },
};
</script>
